<template>
  <div id="rose-chart">
    <div id="main1" style="height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  name: 'RoseChart',
  data() {
    return {
      option: {},
    }
  },
  methods: {
    showCharts() {
      var myChart = echarts.init(document.querySelector("#main1"));      //1:获取dom元素
      // 绘制图表
      const seriesLabel = {
        show: true
      };
      const option = {
        title: {
          text: '本月采样/检测/合格数走势图',
          top:10,
          left:20,
          textStyle: {
            color: '#fff' // 这里设置标题颜色为红色
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['采样数', '检测数', '合格数'],
          top:20,
          right:10,
          textStyle: { //图例文字的样式
            color: '#fff',
            fontSize: 12
          },
        },
        grid: {
          left: '2%',
          right: '9%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          // name: 'Days',
          axisTick: {
            show: false // 去掉刻度线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data: ['水果', '畜禽肉蛋', '水产品','蔬菜','其他'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '采样数',
            type: 'bar',
            data: [165, 170, 30,40,90],
            label: seriesLabel,
          },
          {
            name: '检测数',
            type: 'bar',
            label: seriesLabel,
            data: [150, 105, 110,150,56]
          },
          {
            name: '合格数',
            type: 'bar',
            label: seriesLabel,
            data: [220, 82, 63,66,90]
          }
        ]
      };
      myChart.setOption(option);                              //3：挂载配置项
    },

  },
  mounted() {
    this.showCharts();
  },
}

</script>

<style lang="less">
#rose-chart {
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  box-sizing: border-box;
}
</style>
